<template>
	<view>
		<view class='bill-details'>
			<view class='nav flex-row'>
				<view class='item' :class='type==0 ? "on":""' @click='changeType(0)'>全部</view>
				<view class='item' :class='type==1 ? "on":""' @click='changeType(1)'>待支付</view>
				<view class='item' :class='type==2 ? "on":""' @click='changeType(2)'>已完成</view>
			</view>
			<view class='sign-record'>
				<view class='list' v-for="(item,index) in userBillList" :key="index">
					<view class='item'>
						<view class='data'>{{item.time}}</view>
						<view class='listn'>
							<view class='itemn flex-row row-between-wrapper' v-for="(vo,indexn) in item.child"
								:key="indexn">
								<view>
									<view v-if="vo.rechargeStatus == 'FINISH'" class='name line1'
										style="color: #16ac57;">
										已完成</view>
									<view v-else class='name line1' style="color: #FF7600;">待支付(+{{vo.rechargePrice}})
									</view>
									<view>{{$util.dateFormat(vo.createTime)}}</view>
								</view>
								<view v-if="vo.rechargeStatus != 'FINISH'" class="btn-pay" @click="payRecharge(vo.logId)">去支付</view>
								<view v-else class='num'>+{{vo.rechargePrice}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class='loadingicon flex-row row-center-wrapper' v-if="userBillList.length>0">
					<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
				</view>
				<view v-if="userBillList.length == 0">
					<u-empty mode="favor" icon="../../../../static/images/comment.png" text="暂无账单的记录哦～" width="320"
						height="320" textSize="24"></u-empty>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryRecharge,
		rechargePay
	} from '@/api/recharge.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				loadTitle: '加载更多',
				loading: false,
				loadend: false,
				page: 1,
				limit: 15,
				type: 0,
				userBillList: [],
				times: [],
			};
		},
		computed: mapGetters(['isLogin', 'uid']),
		onShow() {
			if (this.isLogin) {
				this.getUserBillList();
			} else {
				toLogin();
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.type = options.type || 0;
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			this.getUserBillList();
		},
		methods: {
			/**
			 * 获取账户明细
			 */
			getUserBillList: function() {
				let that = this;
				let page = that.page;
				let limit = that.limit;
				if (that.loading) return;
				if (that.loadend) return;
				that.loading = true;
				that.loadTitle = '';
				queryRecharge({
					page: page,
					limit: limit,
					userInfoId: that.uid
				}, that.type).then(res => {
					let list = res.value.list;
					list.forEach((e, i) => {
						let time = that.$util.dateFormat(e.createTime).slice(0, 7);
						if (!this.times.includes(time)) {
							this.times.push(time)
							this.userBillList.push({
								time: time,
								child: []
							})
						}
					})
					for (let x = 0; x < this.times.length; x++) {
						for (let j = 0; j < list.length; j++) {
							let time_key = that.$util.dateFormat(list[j].createTime).slice(0, 7);
							if (this.times[x] === time_key) {
								this.userBillList[x].child.push(list[j])
							}
						}
					}
					let loadend = list.length < that.limit;
					that.loadend = loadend;
					that.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
					that.page += 1;
					that.loading = false;
				}).catch(err => {
					that.loading = false;
					that.loadTitle = '加载更多';
				})
			},

			/**
			 * 切换导航
			 */
			changeType: function(type) {
				this.type = type;
				this.loadend = false;
				this.page = 1;
				this.times = [];
				this.$set(this, 'userBillList', []);
				this.getUserBillList();
			},
			
			/**
			 * 支付
			 */
			payRecharge(logId) {
				let that = this;
				uni.showLoading({
					title: '正在支付',
				})
				// #ifdef MP || APP-PLUS
				rechargePay({
					userInfoId: that.uid,
					logId: logId
				}).then(res => {
					uni.hideLoading();
					let jsConfig = res.value.param;
					uni.requestPayment({
						// #ifdef MP
						timeStamp: jsConfig.timeStamp,
						nonceStr: jsConfig.nonceStr,
						package: jsConfig.package,
						signType: jsConfig.signType,
						paySign: jsConfig.paySign,
						// #endif
						// #ifdef APP-PLUS
						provider: 'wxpay',
						orderInfo: jsConfig,
						// #endif
						success: function(res) {
							return that.$util.Tips({
								title: '支付成功',
								icon: 'success'
							}, {
								tab: 5,
								url: '/pages/users/user_money/index'
							});
						},
						fail: function() {
							return that.$util.Tips({
								title: '支付失败'
							});
						},
						complete: function(res) {
							if (res.errMsg == 'requestPayment:cancel') return that.$util.Tips({
								title: '取消支付'
							});
						}
					})
				}).catch(err => {
					uni.hideLoading();
					return that.$util.Tips({
						title: err
					})
				});
				// #endif
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5 !important;
	}

	.bill-details .nav {
		background-color: #fff;
		height: 90rpx;
		width: 100%;
		line-height: 90rpx;
	}

	.bill-details .nav .item {
		flex: 1;
		text-align: center;
		font-size: 30rpx;
		color: #282828;
	}

	.bill-details .nav .item.on {
		color: #3CBB45;
		border-bottom: 3rpx solid #3CBB45;
	}

	.sign-record .list .item .data {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 30rpx;
		font-size: 24rpx;
		color: #666;
	}

	.sign-record .list .item .listn {
		background-color: #fff;
		font-size: 24rpx;
		color: #999;
	}

	.sign-record .list .item .listn .itemn {
		/* height: 120rpx; */
		border-bottom: 1rpx solid #eee;
		padding: 30rpx;
	}

	.sign-record .list .item .listn .itemn .name {
		width: 390rpx;
		font-size: 28rpx;
		color: #282828;
		margin-bottom: 10rpx;
	}

	.sign-record .list .item .listn .itemn .num {
		font-size: 36rpx;
		font-family: 'Guildford Pro';
		color: #16ac57;
	}

	.sign-record .list .item .listn .itemn .num.font-color {
		color: #FF7600 !important;
	}

	.sign-record .list .item .listn .itemn .btn-pay {
		font-size: 28rpx;
		width: 150rpx;
		height: 54rpx;
		border-radius: 27rpx;
		background-color: #3CBB45;
		text-align: center;
		line-height: 54rpx;
		color: #fff9f8;
	}
</style>